<template>
  <div class="collector">
    <div v-for="(items,i) in subscribers" :key="i" class="collector-item" style="display:flex" @click="GoProfile(items.userId)">
        <img :src="items.avatarUrl" style="cursor:pointer">
        <div class="userDetail">
          <span style="font-size:13.5px;display:flex;align-items:center;cursor:pointer" class="user">
            <span>{{items.nickname}} </span>
            <img src="~assets/img/male.png" style="width:18px;height:18px" v-show="items.gender === 1"> 
            <img src="~assets/img/female.png" v-show="items.gender === 0" style="width:18px;height:18px"> 
          </span>
          <span v-show="items.signature !== ''" style="font-size:12px">{{items.signature}}</span>
        </div>
      
    </div>
  </div>
</template>

<script>
export default {
  props:{
    subscribers:{
      type:Array,
      default(){
        return []
      }
    }
  },
  computed:{
    subScribers(){
      return this.subScribers
    }
  },
  methods:{
    GoProfile(id){
      this.$router.push('/profile/'+id)
    }
  }
}
</script>

<style scoped>
  .collector{
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
  }
  .collector .collector-item{
    flex: 1;
    width: 33.3%;
    min-width: 33.3%;
    max-width: 33.3%;
    padding: 8px 0;
  }
  .collector img{
    width: 90px;
    height: 90px;
    border-radius: 50%;
  }
  .userDetail{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    padding-left: 10px;
    color: rgb(85,85,85);
  }
  .user:hover{
    color: #000;
  }
</style>